<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title>主题管理</title>
		<link rel="icon" th:href="${config.SITE_ICON}">
		<link rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/bootstrap.min.css'}"/>
		<link rel="stylesheet" th:href="${config.SITE_CDN+'/static/iconfont/iconfont.css'}"/>
		<link rel="stylesheet" th:href="${config.SITE_CDN+'/static/css/app.css'}"/>
	</head>
	<body>
		<div class="z-content">
			<div class="z-card">
                <div class="z-card-body z-card-body-tight">
					<button id="uploadTheme" class="btn btn-outline-primary"><i class="mr-3 fa fa-cloud-upload"></i>上传主题</button>
					<div id="themes" class="themes-content">
						<div th:each="theme:${themes}" class="theme-item">
							<div class="theme-box">
								<div class="theme-title">[[${theme.name}]]</div>
								<div class="theme-content">
									<img th:src="${theme.img}" />
								</div>
								<ul class="theme-footer">
									<li>
										<a th:class="${curThemeId==theme.id?'theme-use theme-checked':'theme-use'}" th:theme-id="${theme.id}">
											<i th:class="${curThemeId==theme.id?'ri-check-line':'ri-close-line'}"></i >
											<span th:text="${curThemeId==theme.id?'已启用':'未启用'}"></span>
										</a>
									</li>
									<li>
										<a th:class="${theme.setFlag==1?'theme-set':'theme-set disabled'}" th:theme-id="${theme.id}"><i class="ri-settings-3-line"></i>设置</a>
									</li>
									<li class="z-dropdown dropdown">
										<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="ri-more-fill"></i>更多</a>
										<ul class="dropdown-menu">
											<li><a class="theme-edit" th:theme-id="${theme.id}"><i class="ri-pencil-line"></i>编辑模板</a></li>
											<li><a th:class="${curThemeId==theme.id?'theme-delete disabled':'theme-delete'}" th:theme-id="${theme.id}"><i class="ri-close-line"></i>删除主题</a></li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="theme-modal" class="display-none">
			<form class="form-horizontal" id="themeForm">
			</form>
		</div>
		<script th:src="${config.SITE_CDN+'/static/js/jquery.min.js'}"></script>
		<script th:src="${config.SITE_CDN+'/static/js/bootstrap.min.js'}"></script>
		<script th:src="${config.SITE_CDN+'/static/js/app.js'}"></script>
        <script>
            $(function () {
                App.initUploader({
                    pick: '#uploadTheme',
                    url:'/admin/theme/upload',
                    accept:'zip',
                    before:function(){
						App.blockUI({
							target: 'body',
							boxed: true,
							message: '上传中...'
						});
                        App.mask('#uploadTheme');
                    },
                    onSuccess:function(picker,data){
						App.unblockUI('body');
                        App.unmask('#uploadTheme');
                        if(data.status===200){
                            App.msg({content:'上传成功！',icon:1,time:1000},function () {
								window.location.reload();
                            });
                        }else{
							App.msgE(data.msg);
						}
                    },
					onError:function () {
						App.unblockUI('body');
						App.msgE("上传错误！");
					}
                });

            	//主题启用
            	$(".theme-use").on("click",function () {
            		var $this = $(this);
            		if(!$this.hasClass("theme-checked")){
						App.postAjax("/admin/theme/use",{"themeId":$(this).attr("theme-id")},function (data) {
							if(data.status===200){
								App.msgS(data.msg);
								var $themeChecked = $(".theme-checked");
								$themeChecked.removeClass("theme-checked");
								$themeChecked.find("i").attr("class","ri-close-line");
								$themeChecked.find("span").text("未启用");
								$this.addClass("theme-checked");
								$this.find("i").attr("class","ri-check-line");
								$this.find("span").text("已启用");
                                $(".theme-delete.disabled").removeClass("disabled");
                                $this.parent().parent().find(".theme-delete").addClass("disabled");
							}else{
								App.msgE(data.msg);
							}
						})
					}
				});

            	//主题设置
				$(".theme-set").on("click",function () {
					var $this = $(this);
					var themeId = $(this).attr("theme-id");
					if(!$this.hasClass("disabled")){
						parent.addTabs({
							id:"theme-set-"+themeId,
							title:"主题设置-"+themeId,
							url:"theme/"+themeId+"/setting",
							close: true,
							hashChange: false
						});
					}
				});

				//编辑主题
                $(".theme-edit").on("click",function () {
                    var themeId = $(this).attr("theme-id");
                    parent.addTabs({
                        id:"theme-edit-"+themeId,
                        title:"主题编辑-"+themeId,
                        url:"theme/"+themeId+"/edit",
                        close: true,
                        hashChange: false
                    });
                });

				//删除主题
				$(".theme-delete").on("click",function () {
					var $this = $(this);
					var themeId = $this.attr("theme-id");
					if(!$this.hasClass("disabled")) {
						App.confirm({content:"确认删除该主题？"}, function () {
							App.postAjax("/admin/theme/delete", {themeId: themeId}, function (data) {
								if (data.status === 200) {
									App.msg({content: '删除成功！', icon: 1, time: 1000}, function () {
										window.location.reload();
									});
								} else {
									App.msgE(data.msg);
								}
							})
						})
					}
				});
            });

        </script>

	</body>
</html>
